<template>
    <el-card shadow="always" class="theme-bg4 greet-view">
        <h1>欢迎回来</h1>
        <div>{{ greet }}，管理员{{ userInfo.username }}</div>
        <div class="f-Elarge">{{ clock }}</div>
    </el-card>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name: 'Greet',
    data() {
        return {
            clock: "加载中...",
            timer: null
        }
    },
    mounted() {
        this.timer = setInterval(this.timeClock, 1000)
    },
    beforeDestroy() {
        clearInterval(this.timer)
    },
    methods: {
        // 补零
        Addzero(num) {
            return num < 10 ? "" + "0" + num : num;
        },
        // 星期数
        timeClock() {
            let date = new Date();
            let week = date.getDay();
            switch (week) {
                case 1:
                    week = "星期一";
                    break;
                case 2:
                    week = "星期二";
                    break;
                case 3:
                    week = "星期三";
                    break;
                case 4:
                    week = "星期四";
                    break;
                case 5:
                    week = "星期五";
                    break;
                case 6:
                    week = "星期六";
                    break;
                case 0:
                    week = "星期日";
                    break;
            }
            // 组合年月日
            let ymd =
                date.getFullYear() +
                "-" +
                this.Addzero(date.getMonth() + 1) +
                "-" +
                this.Addzero(date.getDate());
            // 组合时分秒
            let hms =
                this.Addzero(date.getHours()) +
                ":" +
                this.Addzero(date.getMinutes()) +
                ":" +
                this.Addzero(date.getSeconds());
            // 插入页面
            this.clock = ymd + ' ' + week + ' ' + hms;
        },
    },
    computed: {
        ...mapState("userHandle", ["userInfo"]),
        // 标语
        greet() {
            let date = new Date().getHours();
            let greet = "";
            if (date >= 3 && date < 12) {
                greet = "早上好";
            } else if (date >= 12 && date < 18) {
                greet = "中午好";
            } else {
                greet = "晚上好";
            }
            return greet;
        },
    }
}
</script>
<style scoped></style>